<template>
  <div class="accountSecurity rounded-[8px] flex justify-center">
    <div class="aside-left">
      <el-menu
        :default-active="activeId"
        class="el-menu-vertical-demo"
        @open="handleOpen"
        @close="handleClose"
      >
        <template v-for="menu in menuList" :key="menu.id">
          <template v-if="menu.children && menu.children.length > 0">
            <el-sub-menu :key="menu.id" :index="menu.id">
              <template #title
                ><el-icon><location /></el-icon
                ><span>{{ menu.name }}</span></template
              >
              <el-menu-item
                v-for="cell in menu.children"
                :key="cell.id"
                :index="cell.id"
                @click="clickMenu(cell)"
                >{{ cell.name }}</el-menu-item
              >
            </el-sub-menu>
          </template>
          <template v-else>
            <el-menu-item :index="menu.id" @click="clickMenu(menu)">
              <el-icon><setting /></el-icon>
              <span>{{ menu.name }}</span>
            </el-menu-item>
          </template>
        </template>
      </el-menu>
    </div>
    <div class="aside-right">
      <router-view />
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, onMounted, watch } from "vue";
import { useRouter, useRoute } from "vue-router";

const route = useRoute();
// 递归查找匹配的菜单项
const findMatchingMenu = (menus: any[], path: string): string | null => {
  for (const menu of menus) {
    if (menu.url === path) {
      return menu.id;
    }
    if (menu.children) {
      const childMatch = findMatchingMenu(menu.children, path);
      if (childMatch) return childMatch;
    }
  }
  return null;
};
const getMenuIdFromRoute = () => {
  const currentPath = route.path;
  const matchedId = findMatchingMenu(menuList.value, currentPath);
  if (matchedId) {
    activeId.value = matchedId;
    return matchedId;
  }

  console.warn(`未找到匹配${currentPath}的菜单项`);
  return null;
};

const router = useRouter();
const activeId = ref("1");
const menuList = ref([
  {
    id: "1",
    name: "个人中心",
    url: "/safeCenter/accountSecurity/personalCenter"
  },
  {
    id: "2",
    name: "安全设置",
    url: "",
    children: [
      {
        id: "2-1",
        name: "设置别名",
        url: "/safeCenter/accountSecurity/setAliases"
      },
      {
        id: "2-2",
        name: "设置密保",
        url: "/safeCenter/accountSecurity/setSecurity"
      },
      {
        id: "2-3",
        name: "绑定/解绑手机",
        url: "/safeCenter/accountSecurity/phone"
      },
      {
        id: "2-4",
        name: "绑定/解绑邮箱",
        url: "/safeCenter/accountSecurity/mail"
      },
      {
        id: "2-5",
        name: "开启/关闭多端登录",
        url: "/safeCenter/accountSecurity/platform"
      }
    ]
  },
  { id: "3", name: "登录日志", url: "/safeCenter/accountSecurity/loginLog" }
]);
const handleOpen = (key: string, keyPath: string[]) => {
  console.log(key, keyPath);
};
const handleClose = (key: string, keyPath: string[]) => {
  console.log(key, keyPath);
};
const clickMenu = (menu: any) => {
  if (menu.url) {
    router.push(menu.url);
  }
};

onMounted(() => {
  getMenuIdFromRoute();
});
// 监听路由变化
watch(
  () => route.path,
  newPath => {
    console.log("路由变化:", newPath);
    getMenuIdFromRoute();
  },
  { immediate: true }
);
</script>

<style lang="scss" scoped>
.el-menu {
  border: 0 !important;
}
.accountSecurity {
  height: 100%;
  background-color: var(--color-main-background-secondary);
  .name {
    color: var(--color-main-text);
  }
  .aside-left {
    height: 100%;
    width: 25%;
    border-right: 1px solid var(--el-menu-border-color);
  }
  .aside-right {
    height: 100%;
    width: 75%;
  }
}
</style>
